<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>调色盘</title>
    <style>
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>

<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d")

    function draw() {

        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                    Math.floor(255 - 42.5 * j) + ',0)';
                ctx.fillRect(j * 50, i * 50, 50, 50);
            }
        }

        // for (var i = 0; i < 6; i++) {
        //     for (var j = 0; j < 6; j++) {
        //         ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
        //         ctx.strokeRect(j * 50, i * 50, 40, 40);
        //     }
        // }
    }

    draw();

    function randomInt(from, to) {
        return parseInt(Math.random() * (to - from + 1) + from);
    }

</script>
</body>

</html>